<template>
	<view class="">
		<view class="top"></view>
		<view class="main">
			<view class="title">
				已经提交过的维修单：
			</view>
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in storeInfo" :key="item.Id"
				@click="click" @open="open" :options="options">
				<!-- <view class="item u-border-bottom showdown" style="border-bottom: 1px solid #eaeaea;">
					<view class="title-wrap" @click="choose(item.Id)" >
						<text class="title u-line-2">
							<text>{{ item.ro_title }}</text>
							
							
						</text>
					</view>
					<view class="title-wrap title" v-if="!item.enble">
						<text>已关闭</text>
					</view>
				</view> -->
				<view class="main-top" style="margin-top: 5rpx;" @tap='choose(item.Id)'>
					<view class="mian-list">
						<view class="img">
							<!-- <image :src="item.st_img_photo1"></image> -->
							<view>
								<text class="top-text">{{ item.ro_title }}</text>
								<text class="text" v-if="!item.enble">{{item.ro_person}} | {{item.ro_addr}} | 已关闭</text>
								<text class="text" v-else>{{item.ro_person}} | {{item.ro_addr}}</text>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action>
			<view class="main-top" style="margin-top: 10rpx;display: flex; justify-content:center" @tap="enterStoreInfo">
					<image src="../../static/img/add.jpg" mode="" style="height: 9vh;width: 9vh;margin-top: 1vh;"></image>
			</view>
		</view>
		<u-modal v-model="modelshow" :show-cancel-button='true' @confirm="confirm" @cancel="cancel">
			<view class="slot-content">
				<input style="margin-left: 4vw;" type="text" placeholder="请输入留言" :value="content" v-model="content" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//加载页数。默认第一页
				pageIndex:1,
				
				
				modelshow:false,
				content: '',
				contentId:0,
				
				index:'',
				storeInfo: '',
				mainmsg: '',
				token: '',
				
				
				show: false,
				options: [
					{
						text: '处理',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '关闭',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		// },
		onLoad: function(options) {
			this.mainmsg = uni.getStorageSync('mainmsg');
			this.token = uni.getStorageSync('token');
			this.begin()
		},

		onUnload: function() {

		},
		// 触底加载
		onReachBottom:function(){
			//分页接口有问题，返回的都是全部数据
			// this.pageIndex = this.pageIndex + 1
			// this.begin()
		},
		methods: {
			enterStoreInfo(){
				uni.navigateTo({
					url: 'AddRepairOrder'
				});
			},
			confirm(){
				this.storeInfo[this.contentId].show = false;
				let _this = this
				let data = {
					Id:this.storeInfo[this.contentId].Id,
					plp_repaircode:this.storeInfo[this.contentId].plp_repaircode,
					ro_repairinfo:this.content
				}
				uni.request({
					url: _this.$title + 'AppUserFeatures/ServiceRepairOrder',
					data: data,
					header: {
						'auth': _this.token
					},
					success: (res) => {
						if (res.data.status === 200) {
							this.$u.toast(`处理成功`);
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						}
					}
				});
			},
			cancel(){
				
			},
			click(index, index1) {
				let _this = this
				if (index1 == 1) {
					
					let data = {
						repairorderid:this.storeInfo[index].Id
					}
					
					uni.request({
						url: _this.$title + 'AppUserFeatures/DisenbleRepairOrder',
						data: data,
						header: {
							'auth': _this.token
						},
						success: (res) => {
							if (res.data.status === 200) {
								this.$u.toast(`关闭成功`);
							} else {
								uni.showToast({
									icon: "none",
									title: res.data.message
								})
							}
						}
					});
					this.storeInfo[index].show = false;
				} else {
					this.modelshow = true;
					this.contentId = index
					// this.storeInfo[index].show = false;
					// this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				
				this.storeInfo[index].show = true;
				this.storeInfo.map((val, idx) => {
					if (index != idx) this.storeInfo[idx].show = false;
				})
			},

			choose(e) {
				uni.navigateTo({
					url: 'AddRepairOrder?id=' + e
				});
			},
			begin() {
				//分页接口有问题，返回的都是全部数据
				let data = {
					"AppUserInfoId": this.mainmsg.Id,
					"onePageSize": 5,
					'pageIndex': this.pageIndex
				}
				let _this = this
				uni.request({
					url: _this.$title + 'AppUserFeatures/GetRepairOrdersByAuId',
					data: data,
					header: {
						'auth': _this.token
					},
					success: (res) => {
						if (res.data.status === 200) {
							_this.storeInfo = res.data.data
							for (let i = 0; i < _this.storeInfo.length; i++) {
								_this.storeInfo[i].show = false
							}
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.main-top {
		background-color: white;
		height: 9vh;
		width: 100%;
		padding: 0 0 40upx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		border-radius: 3vw;
		box-shadow: 0px 0px 10px #d6d6d6;
	
		.mian-list {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			.img {
				width: 100%;
				display: flex;
				justify-content: center;
				flex-direction: row;
	
				image {
					top: 25%;
					margin-left: 5vw;
					width: 3rem;
					height: 3rem;
				}
	
				text {
					margin-left: 3vw;
					display: flex;
					flex-direction: row;
					width: 15rem;
				}
	
				.top-text {
					padding-top: 1vh;
					font-size: large;
					font-weight: 200;
				}
	
				.text {
					color: #8F8F94;
					font-size: medium;
				}
			}
			
	
		}
	}
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.top {
		width: 100%;
		height: 12rem;
		background-color: #18ab4e;
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}

	.main {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: -8em;
		padding-bottom: 2rem;
		width: 100vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.main2 {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: 2rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.list2 {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}
	.showdown{
		display: flex;
		justify-content:space-between;
		height: 9vh;
	}
	
	.title {
		/* position: relative; */
		padding-top: 1rem;
		display: flex;
		justify-content: space-between;
		height: 2rem;
		line-height: 3rem;
		font-size: 300;
		font-weight: 300;
		margin-left: 3vw;
		padding-bottom: 1rem;
	}

	.list {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		/* display: flex; */
		/* justify-content: space-between; */
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-last {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		/* display: flex; */
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		float: right;
		/* border-bottom: 1px solid #ABB1BA; */
		height: 1rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-view {
		width: 250rpx;
		white-space: nowrap;
	}

	.list-car {
		display: flex;
		justify-content: space-between;
	}

	input {
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
		font-size: medium;
		border: 0;
		outline: none;
		background-color: rgba(0, 0, 0, 0);
		width: 40vw;
	}

	.face {
		background-color: white;
		margin: 0 auto;
		margin-top: 1rem;
		height: 5rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
		display: flex;
		justify-content: space-between;
	}

	.canvas-bg {
		/* margin: 0 auto; */
		/* margin-top: 1rem; */
		height: 88vw;
		width: 88vw;
		float: left;
		/* box-shadow: 0px 0px 0.625rem #55ffff; */
		/* z-index: 1000; */
		/* border-radius: 1.625rem; */
		/* display: flex; */
		/* justify-content: space-between; */
	}

	.carNum {
		border: 1px solid black;
		width: 1.8rem;
		height: 2.6rem;
		margin-top: 0.2rem;
		text-align: center;
		line-height: 2.6rem;
	}

	/* .carNum:hover {
		border: 1px solid red;
	} */

	.isNumClick {
		border: 1px solid red;
	}

	/* .carNum:hover ~ #two { background-color: yellow; } */


	.bottom {
		margin: 0 auto;
		margin-top: 5rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		background-color: #18ab4e;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
	}

	.bottom-after {
		margin: 0 auto;
		margin-top: 7rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
		background-color: #b4bdcb;
	}


	.content {
		width: 100%;
		overflow-x: hidden;
	}

	.container {
		position: relative;
	}

	.delete-icon {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		right: -197rpx;
		width: 130rpx;
		height: 62rpx;
		line-height: 62rpx;
		border-radius: 31rpx;
		font-weight: 500;
		font-size: 32rpx;
		text-align: center;
		color: #FFFFFF;
		background: #FF1C1C;
	}
	
</style>
